<template>
	<div>
		<el-form :inline="true"  style="padding-top: 10px;padding-left: 5px;">
			<el-form-item label="起止日期" prop="startandend" label-width="80px">
				<el-date-picker v-model="startandend" type="daterange" align="right" value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changedate" :picker-options="pickerOptions2">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="图例" prop="stype" label-width="80px">
				<el-select clearable v-model="stype" placeholder="请选择" style="width: 120px;" @change="changestype">
					<el-option v-for="item in stypedata" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="显示图" prop="showt" label-width="80px">
				<el-select clearable v-model="showt" placeholder="请选择" style="width: 120px;" @change="changeshow">
					<el-option v-for="item in showdata" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<div style="float: left;">
					<el-button type="primary" @click="querybutton">查询</el-button>
					<el-button type="primary" @click="showExport" >导出报表</el-button>
				</div>
			</el-form-item>
		</el-form>
		<table style="width: 100%;">
			<tr style="height: 100px;text-align: center;">
				<td style="background:hotpink;width: 19%;"><span style="font-size: 40px;">{{ ordersnum }}</span><br/>订单数</td>
				<td style="background:#409EFF;width: 19%;"><span style="font-size: 40px;">{{ return_singular }}</span><br/>退单数</td>
				<td style="background: lightseagreen;width: 19%;"><span style="font-size: 40px;">{{ order_amount }}</span><br/>订货总额</td>
				<td style="background:aquamarine;width: 19%;"><span style="font-size: 40px;">{{ rerurn_amont }}</span><br/>退货总额</td>
				<td style="background:cyan;width: 19%;"><span style="font-size: 40px;">{{ total_amount }}</span><br/>金额合计</td>
			</tr>
		</table>
		<div id="mychart" v-show="showchart" style="width: 80%;height: 400%;"></div>
		
		<el-table :data="ordersData" showOverflowTooltip style="width: 100%" stripe border tooltip-effect="dark" height="500">
			<!--<el-table-column type="selection" width="50" > </el-table-column>-->
			<el-table-column prop="日期" label="时间" show-overflow-tooltip></el-table-column>
			<el-table-column prop="订货单" label="订货单" show-overflow-tooltip></el-table-column>
			<el-table-column prop="退货单" label="退货单" show-overflow-tooltip></el-table-column>
			<el-table-column prop="订货客户数" label="订货客户数" show-overflow-tooltip></el-table-column>
			<el-table-column prop="退货客户数" label="退货客户数" show-overflow-tooltip></el-table-column>
			<el-table-column prop="订货金额" label="订货金额" show-overflow-tooltip></el-table-column>
			<el-table-column prop="退货金额" label="退货金额" show-overflow-tooltip></el-table-column>
			<el-table-column prop="合计金额" label="合计金额" show-overflow-tooltip></el-table-column>
		</el-table>
	</div>
</template>

<script>
	import { report_order_statistical,get_order_statistics } from '../../api/report.js'
	let echarts = require('echarts')
	// 引入柱状图组件
	require('echarts/lib/chart/bar')
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip')
	require('echarts/lib/component/title')
	require('echarts/lib/component/polar')
	export default {
		data() {
			return {
				ordersData:[],
				tempstring:'',
				startandend:[],
				stype:'1',
				pickerOptions2: {},
				stypedata:[
					{'label':'订货单数','value':'1'},
					{'label':'退货单数','value':'2'},
					{'label':'订货金额','value':'3'},
					{'label':'退货金额','value':'4'},
					{'label':'金额合计','value':'5'},
				],
				dateData: [],
				chartsData:[],
				showchart:true,
				showdata:[
					{'label':'是','value':'1'},
					{'label':'否','value':'2'}
				],
				showt:'1',
				num:null,
				ordersnum:0,
				return_singular:0,
				order_amount:0,
				rerurn_amont:0,
				total_amount:0,
				chartsorderData:[],
				chartsreturnData:[],
				chartsorderamountData:[],
				chartsreturnamountData:[],
				chartstotal_amountData:[],
				order_statisticsData:[]
			};
		},
	
		mounted() {
			this.showcharts();
		},
		methods:{
			get_reportprderList() {
			  report_order_statistical({parameter:this.startandend[0],num:this.num}).then(response => {
			    this.ordersData = response;
				for(let i=0;i<this.ordersData.length;i++){
					
					this.dateData.push(this.ordersData[i].日期);
					this.chartsorderData.push(this.ordersData[i].订货单);
					this.chartsreturnData.push(this.ordersData[i].退货单);
					this.chartsorderamountData.push(this.ordersData[i].订货金额);
					this.chartsreturnamountData.push(this.ordersData[i].退货金额);
					this.chartstotal_amountData.push(this.ordersData[i].合计金额);
				}
				this.changestype();
			  })
			},
			changedate(){
				let sDate1 = '';
				let sDate2 = '';
				sDate1 = this.startandend[0];
				sDate2 = this.startandend[1];
				let dateSpan,tempDate,iDays;
				sDate1 = Date.parse(sDate1);
				sDate2 = Date.parse(sDate2);
				dateSpan = sDate2 - sDate1;
				dateSpan = Math.abs(dateSpan);
				iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
				this.num = iDays;
			},
			get_order_statisticsData() {
				
			  get_order_statistics({parameter:this.startandend[0],parameter2:this.startandend[1]}).then(response => {
			    this.order_statisticsData = response;
				
				this.ordersnum = this.order_statisticsData[0].订货单;
				this.return_singular = this.order_statisticsData[0].退货单;
				this.order_amount = this.order_statisticsData[0].订货金额;
				this.rerurn_amont = this.order_statisticsData[0].退货金额;
				this.total_amount =this.order_statisticsData[0].合计;
			  })
			},
			querybutton(){
				this.ordersnum = 0;
				this.return_singular = 0;
				this.order_amount = 0;
				this.rerurn_amont = 0;
				this.total_amount = 0;
				this.ordersData = [];
				this.chartsorderData = [];
				this.chartsreturnData = [];
				this.chartsorderamountData = [];
				this.chartsreturnamountData = [];
				this.chartstotal_amountData = [];
				this.dateData = [];
				this.get_order_statisticsData();
				this.get_reportprderList();
			},
			
			changeshow(){
				if(this.showt=='1'){
					this.showchart = true;
				}else{
					this.showchart = false;
				}
			},
			changestype(){
				if(this.stype=='1'){
					this.chartsData = [];
					this.chartsData = this.chartsorderData.slice(0);
				}else if(this.stype=='2'){
					this.chartsData = [];
					this.chartsData = this.chartsreturnData.slice(0);
				}else if(this.stype=='3'){
					this.chartsData = [];
					this.chartsData = this.chartsorderamountData.slice(0);
				}else if(this.stype=='4'){
					this.chartsData = [];
					this.chartsData = this.chartsreturnamountData.slice(0);
				}else {
					this.chartsData = [];
					this.chartsData = this.chartstotal_amountData.slice(0);
				}
				this.showcharts();
			},
			
			showcharts: function() {
				let chart_option = {
					//color: ['#3398DB'],
					 toolbox: {
						feature: {
							saveAsImage: {
								pixelRatio: 2
							}
						}
					},
					 xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.dateData
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.chartsData,
						type: 'line',
						areaStyle: {
// 							normal: {
// 								color: '#8cd5c2' //改变区域颜色
// 							}
						}
					}]
				}
				let myChart = echarts.init(document.getElementById('mychart'))
				myChart.setOption(chart_option)
			},
			showExport(){
				this.downloadLoading = true
			   require.ensure([], () => {
					const {
						export_json_to_excel
					} = require('../../vendor/Export2Excel')
					const tHeader = ['时间','订货单','退货单','订货客户数','退货客户数','订货金额','退货金额','合计金额'];
					const filterVal = ['日期','订货单','退货单','订货客户数','退货客户数','订货金额','退货金额','合计金额'];
					const list = this.ordersData;
					const _data = this.formatJson(filterVal, list);
					export_json_to_excel(tHeader, _data, '订单统计报表','订单统计报表');
				
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
		},
		created() {
			let date = new Date();
			let startdate = '';
			let nowdate = '';
			startdate = (date.getFullYear()+ '-' + ((date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)) + '-' + '01').toString();
			nowdate = (date.getFullYear()+ '-' + ((date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)) + '-' + ((date.getDate())<10?'0'+(date.getDate()):(date.getDate()))).toString();
			this.startandend.push(startdate);
			this.startandend.push(nowdate);
			this.changedate();
			this.querybutton();
		}
	}
</script>

<style>

</style>
